<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <!-- Required Stylesheets -->
    <link href="/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<div class="layui-btn-container common">
    <button type="button" class="layui-btn" id="btnAdd">增加</button>
    <button type="button" class="layui-btn" id="btnEdit">编辑</button>
    <button type="button" class="layui-btn" id="btnDel">删除</button>
</div>
<div class="container">
    <div class="layui-col-md2">
        <div id="invcTree" class="demo-tree demo-tree-box"></div>
    </div>
    <div class="layui-col-md10">
        <table class="layui-hide" id="invGrid" lay-filter="invGrid"></table>
    </div>
</div>
<!-- Required Javascript -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/layui/extend/tableSelect.js"></script>
<script type="text/javascript">
    function buildDomTree() {
        var data = [];

        $.ajax({
            type: "GET",
            async: false,
            url: "/inventoryClass/getTree",
            success: function (msg) {
                // console.log(msg);
                data = msg.data;
            }
        });
        // console.log(data);
        return data;
    }

    //layui.use('tree', function () {
    var tree = layui.tree
        , layer = layui.layer
        , util = layui.util
        //模拟数据
        , data1 = buildDomTree();

    //常规用法
    tree.render({
        elem: '#invcTree' //默认是点击节点可进行收缩
        , id: 'invcTree'
        , data: data1
        , click: function (obj) {
            //console.log(obj.data); //得到当前点击的节点数据
            //console.log(obj.state); //得到当前节点的展开状态：open、close、normal
            //console.log(obj.elem); //得到当前节点元素
            //console.log(obj.data.children); //当前节点下是否有子节点
            table.reload('invGrid',{
                url:'/inventory/getByParentID?id='+obj.data.id,
                method:'get'
            });
        }
    });

    //});
</script>

<script>
    var table = layui.table;
    table.render({
        elem: '#invGrid'
        , url: '/inventory/getListWithPage'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
            { checkbox: true }
            , { field: 'iID', width: 80, title: 'ID', sort: true }
            , { field: 'cInvCode', width: 150, title: '存货编码', sort: true }
            , { field: 'cInvName', width: 150, title: '存货姓名', sort: true }
            , { field: 'iInventoryClassID', width: 150, title: '所属分类ID', sort: true }
        ]]
        , id: 'invGrid'
        , page: true
        , limit: 10
        // , method: 'post'  //提交方式
        , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: ['filter', 'exports', 'print'] //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    });
</script>

<script>
    var form = layui.form;
    form.render();

    //弹出一个iframe层
    $('#btnAdd').on('click', function () {
        layer.open({
            type: 2,
            id: "InvCreate",
            title: '新增存货',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: '/inventory/create',
            end: function () {
                //do something
                //console.log('end回调');
                //layer.close(index); //如果设定了yes回调，需进行手工关闭
                //
                table.reload('invGrid',{
                    url:'/inventory/getListWithPage',
                    method:'get'
                });
            }
        });
    });

    $('#btnEdit').on('click', function () {
        var checkStatus = table.checkStatus('invGrid');
        // console.log(checkStatus.data) //获取选中行的数据
        // console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
        // console.log(checkStatus.isAll ) //表格是否全选

        if (checkStatus.data.length == 0) {
            //配置一个透明的询问框
            layer.msg('请先选择要修改的存货。', {
                time: 5000, //5s后自动关闭
                btn: ['确认']
            });
            return;
        }

        if (checkStatus.data.length>1){
            layer.msg('只能选择一个要修改的存货。', {
                time: 5000, //5s后自动关闭
                btn: ['确认']
            });
            return;
        }

        layer.open({
            type: 2,
            id: "InvEdit",
            title: '修改存货',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: '/inventory/update?id=' + checkStatus.data[0].iID,
            end: function () {
                //do something
                //console.log('end回调');
                //layer.close(index); //如果设定了yes回调，需进行手工关闭
                //
                table.reload('invGrid',{
                    url:'/inventory/getListWithPage',
                    method:'get'
                });
            }
        });
    });

    $('#btnDel').on('click', function () {
        var checkStatus = table.checkStatus('invGrid');
        console.log(checkStatus.data) //获取选中行的数据
        console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
        console.log(checkStatus.isAll ) //表格是否全选

        if (checkStatus.data.length == 0) {
            //配置一个透明的询问框
            layer.msg('请先选择要删除的存货。', {
                time: 5000, //20s后自动关闭
                btn: ['确认']
            });
            return;
        }

        layer.confirm('是否要删除当前存货？', {
            btn: ['确认', '取消'] //可以无限个按钮
        }, function (index, layero) {
            // console.log(layero);
            // console.log("{id:"+$('#iID').val()+"}");
            // console.log("id=" + checkStatus.data[0].iID);
            var ids=new Array();
            for (var i=0;i<checkStatus.data.length;i++){
                ids.push(checkStatus.data[i].iID);
            }

            //按钮【确认】的回调
            $.ajax({
                type: "POST",
                data: JSON.stringify(ids),//checkStatus.data[0].iID,
                dataTypeString: "json",
                contentType : 'application/json;charset=utf-8',
                async: false,
                url: "/inventory/deleteList",
                success: function (msg) {
                    console.log(msg);
                    if (msg.code == "0") {
                        table.reload('invGrid',{
                            url:'/inventory/getListWithPage',
                            method:'get'
                        });
                    }
                    else {
                        layer.msg('错误号：' + msg.code + ' 错误信息：' + msg.msg, { icon: 2 });
                    }
                }
            });
            layer.close(index);
        }, function (index, layro) {
            //按钮【取消】的回调
        });
    });
</script>
</body>
</html>
